<template>
	<scroll-view scroll-y="true" :style="{'height':height}">

		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view v-for="(item,index) in dataList" :key="index" @click="JumpDetails(item)" class="css-tableViewCell">
				<view class="cell-title">
					{{ item.title }}
				</view>
				<view class="cell-digest">
					{{ item.digest }}
				</view>
				<view class="cell-source u-flex">
					<view>
						{{ item.postTime }}
					</view>
					<view>
						{{ item.source}}
					</view>
				</view>
				<view class="cell-image" v-for="(url,index) in item.imgList" :key="index">
					<image :src="url" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
		</mescroll-body>
	</scroll-view>
</template>

<script>
	let app = {}
	// #ifdef MP-WEIXIN
	app = getApp({
		allowDefault: true
	}).$vm
	// #endif
	// #ifndef MP-WEIXIN
	app = getApp({
		allowDefault: true
	})
	// #endif
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		props: ['typeId', 'height'],
		data() {
			return {
				dataList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption: {},
			}
		},
		watch: {

		},
		methods: {
			JumpDetails(item) {
				app.$navigateTo('/freeApi/newDetail/newDetail?newsId=' + item.newsId + "&title=" + item.title);
			},
			upCallback(page) {
				setTimeout((res) => {
					if (this.typeId) {

						let pageNum = page.num; // 页码, 默认从1开始
						let pageSize = page.size; // 页长, 默认每页10条

						let url = " https://www.mxnzp.com/api/news/list/v2?typeId=" + this.typeId + "&page=" +
							pageNum +
							"&app_id=" + getApp()
							.globalData.app_id +
							"&app_secret=" + getApp().globalData.app_secert;

						uni.request({
							url: url,
							method: 'GET',
							success: (res) => {
								console.log(res.data);
								if (res.data.code == 1) {
									if (pageNum == 1) {
										this.dataList = [];
									}
									this.dataList = this.dataList.concat(res.data.data);
									this.mescroll.endBySize(this.dataList.length, this.dataList
										.length);
								} else {
									uni.showToast({
										icon: "none",
										title: res.data.msg
									});
									this.mescroll.endBySize(1, 1);
								}
							},
							fail: (err) => {
								console.log(err);
								this.mescroll.endBySize(1, 1);
							}
						})
					}
				}, 1000);
			},
		}

	}
</script>

<style lang="scss" scoped>
	.css-tableViewCell {
		color: #999;
		margin: 15px;
		padding: 20px 15px;
		background: rgba(255, 255, 255, 0.05);
		box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
		border: 1px solid rgba(255, 255, 255, 0.1);
		transition: 0.5s;
		border-radius: 10px;
		backdrop-filter: blur(10px);
		transform: rotate(calc(var(--r) * 1deg));

		.cell-title {
			font-size: 16px;
			font-weight: bold;
			line-height: 24px;
		}

		.cell-digest {
			font-size: 14px;
			padding: 10px 0;
		}

		.cell-source {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			font-size: 14px;
			color: #666;
		}

		.cell-image {
			width: calc(100vw - 60px);
			height: calc(100vw - 60px);
		}

		.cell-image:image:nth-child(2) {
			width: calc(50vw - 30px - 5px);
			height: calc(50vw - 30px - 5px);
			box-shadow:
				3.7px 3.7px 1.8px rgba(0, 0, 0, 0.002),
				8.1px 8.1px 4.6px rgba(0, 0, 0, 0.006),
				14px 14px 9.2px rgba(0, 0, 0, 0.011),
				22.9px 22.9px 17.2px rgba(0, 0, 0, 0.017),
				40.6px 40.6px 33.1px rgba(0, 0, 0, 0.025),
				100px 100px 80px rgba(0, 0, 0, 0.04);
		}
	}
</style>